<template>
  <el-drawer
    v-if="dialogVisible"
    size="70%"
    :title="title"
    :destroy-on-close="true"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    :modal-append-to-body="false"
  >
    <div class="app-context">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="选择信息集"></el-step>
        <el-step title="选择查询项"></el-step>
        <el-step title="设置关联条件"></el-step>
        <el-step title="设置查询条件"></el-step>
        <el-step title="设置统计和分组"></el-step>
        <el-step title="设置结果排序"></el-step>
        <el-step title="预览"></el-step>
      </el-steps>

      <div class="app-query-btn">
        <el-button
          type="primary"
          v-if="active > 0 && active < 7"
          @click="onPrevious"
          >上一步</el-button
        >
        <el-button type="primary" v-if="active < 6" @click="onNext"
          >下一步</el-button
        >
      </div>

      <div class="app-table" v-if="active === 0">
        <sysQueryTable :id="id" @onCallBack="onCallBack"></sysQueryTable>
      </div>

      <div class="app-cols" v-if="active === 1">
        <sysQueryItem :id="id" @onCallBack="onCallBack"></sysQueryItem>
      </div>
      <div class="app-query-relevance" v-if="active === 2">
        <sysQueryRelevanceCondition
          :id="id"
          @onCallBack="onCallBack"
        ></sysQueryRelevanceCondition>
      </div>
      <div class="app-query-condition" v-if="active === 3">
        <sysQueryCondition
          :id="id"
          @onCallBack="onCallBack"
        ></sysQueryCondition>
      </div>
      <div class="app-query-count" v-if="active === 4">
      </div>
      <div class="app-query-order" v-if="active === 5">
        <sysQueryOrder :id="id" @onCallBack="onCallBack"></sysQueryOrder>
      </div>
      <div class="app-query-view" v-if="active === 6">
        <sysQueryResult :id="id" @onCallBack="onCallBack"></sysQueryResult>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import sysQueryTable from "@/views/sysQueryTable";
import sysQueryItem from "@/views/sysQueryItem";
import sysQueryRelevanceCondition from "@/views/sysQueryRelevanceCondition";
import sysQueryCondition from "@/views/sysQueryCondition";
import sysQueryOrder from "@/views/sysQueryOrder";
import sysQueryResult from "@/views/sysQueryResult";

export default {
  components: {
    sysQueryTable,
    sysQueryItem,
    sysQueryRelevanceCondition,
    sysQueryCondition,
    sysQueryOrder,
    sysQueryResult
  },
  data() {
    return {
      dialogVisible: false,
      title: "配置高级查询",
      active: 0,
      id: "",
    };
  },
  methods: {
    onShow(id) {
      this.id = id;
      this.dialogVisible = true;
    },
    onClose() {
      this.dialogVisible = false;
    },
    onCallBack() {
      this.$emit("onCallBack");
    },
    onNext() {
      this.active++;
    },
    onPrevious() {
      this.active--;
    },
  },
  mounted() {},
};
</script>

<style scoped>
.app-context {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

.el-steps {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

.app-table,
.app-cols,
.app-query-relevance,
.app-query-condition,
.app-query-count,
.app-query-order,
.app-query-btn,
.app-query-view {
  display: block;
  font-size: 18px;
  width: 90%;
}

.app-query-btn {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
</style>
